<template>
  <div class="pay-methods">
    <div class="pay-methods__table">
      <div class="pay-methods__table--thead">
        <div>收款类型</div>
        <div>收款码</div>
        <div>是否开启该收款</div>
      </div>
      <div class="pay-methods__table--tbody">
        <template v-for="(item, index) in payMethodsList">
          <div><img />{{ item.type }}</div>
          <div>
            <upload v-if="item.code"></upload>
          </div>
          <div>
            <span :style="item.isOpen && 'color:#999'">否</span>
            <div>
              <n-switch :default-value="item.isOpen" @update:value="update($event, index)" />
            </div>
            <span :style="!item.isOpen && 'color:#999'">是</span>
          </div>
        </template>
      </div>
    </div>
    <div class="pay-methods__tip">
      <div>
        <div></div>提示
      </div>
      <ul>
        <li>开启收款方式后，支付界面即显示该收款方式。</li>
        <li>可点击上传收款码</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import upload from "@/components/upload/index.vue"
import { ref } from 'vue';
const payMethodsList = ref([{
  type: '现金收款',
  isOpen: false
}, {
  type: '微信收款',
  code: 'url',
  isOpen: false
}, {
  type: '支付宝收款',
  code: 'url',
  isOpen: false
}, {
  type: '系统收款',
  code: 'url',
  isOpen: false
}, {
  type: 'POS机收款',
  code: 'url',
  isOpen: false
}])
const update = (value, index) => {
  payMethodsList.value[index].isOpen = value
}
</script>
<style lang="less" scoped>
.pay-methods {
  padding: 30px;
  box-sizing: border-box;

  &__table {
    border: 1px solid #E5E5E5;

    &--thead,
    &--tbody {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 100px;
      font-size: 26px;
      color: #2E323D;

      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }

    &--thead {
      font-size: 26px;
      color: #2E323D;
      background: #F8F8F8;
      border: 1px solid #E5E5E5;

      >div:first-child {
        justify-content: start;
        padding-left: 30px;
        box-sizing: border-box;
      }

      >div:last-child {
        justify-content: end;
        padding-right: 30px;
        box-sizing: border-box;
      }
    }

    &--tbody {

      >div:nth-child(6n),
      >div:nth-child(6n-1),
      >div:nth-child(6n-2) {
        background: #F8F8F8;
      }

      >div:nth-child(3n) {
        justify-content: end;
        padding-right: 30px;
        box-sizing: border-box;

        >div {
          margin: 0 11px 0 16px;

          /deep/ .n-switch {
            zoom: 2.55;

            &:focus .n-switch__rail {
              box-shadow: none;
            }

            &.n-switch--active {
              .n-switch__rail {
                background-color: #1ABD69;
              }
            }

            .n-switch__rail {
              background-color: #D8D8D8;
            }
          }
        }
      }

      >div:nth-child(3n-2) {
        justify-content: start;

        >img {
          width: 64px;
          height: 64px;
          margin: 0 24px 0 30px;
        }
      }
    }

  }

  &__tip {
    margin-top: 30px;
    padding: 20px 20px 75px;
    background: #FFF7EC;
    border-radius: 5px;
    box-sizing: border-box;

    >div:first-child {
      display: flex;
      align-items: center;
      font-size: 22px;
      font-weight: 400;
      color: #4A5060;

      div {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    ul {
      list-style-type: disc;
      margin: 19px 0 0 58px;
      li {
        font-size: 22px;
        &::marker {
          font-size: 22px;
          color: #666;
        }
        color:#ff8800;
      }
      li+li{
        margin-top: 15px;
      }
    }
  }

}
</style>